<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'
	import {
		navigateBack,
	} from "@/assets/scripts/navigate.js"
	import {
		uploadApi,
		addArticleApi,
	} from "@/assets/api/other/spaceDetails.js"
	const meMemorialId = ref('')
	const isUploading = ref(false)
	const articleTitle = ref("")
	const articleValue = ref("")
	const uploadResUrl = ref("")

	const handleUploadSuccess = async (e) => {
		isUploading.value = true
		const res = await uploadApi(e.tempFilePaths[0])
		isUploading.value = false
		if (res.code === 200) {
			uni.showToast({
				title: '上传成功',
				icon: 'uccess',
				complete: () => {
					uploadResUrl.value = res.url
				}
			})
		} else {
			uni.showToast({
				title: '上传失败',
				icon: 'error'
			})
		}
	}

	const editor_hanleInput = (e) => {
		// console.log('==== input :', e)
		articleValue.value = e.html
	}

	const editor_upinImage = async (tempFiles, editorCtx) => {
		// 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
		// console.log(tempFiles, editorCtx);
		const res = await uploadApi(tempFiles[0].path)
		if (res.code !== 200) {
			uni.showToast({
				title: '上传失败',
				icon: 'error'
			})
			return
		}
		editorCtx.insertImage({
			src: res.url,
			width: '80%',
			success: function() {
				uni.showToast({
					title: '上传成功',
					icon: 'success'
				})
			}
		})
	}

	const editorSubmit_handleClick = async () => {
		if (articleTitle.value == '') {
			uni.showToast({
				title: '请检查标题',
				icon: 'error'
			})
			return
		}
		if (articleValue.value == '') {
			uni.showToast({
				title: '请检查内容',
				icon: 'error'
			})
			return
		}
		if (uploadResUrl.value == '') {
			if (isUploading.value == true) {
				uni.showToast({
					title: '图片上传中',
					icon: 'error'
				})
			} else {
				uni.showToast({
					title: '请检查图片',
					icon: 'error'
				})
			}

			return
		}
		const res = await addArticleApi({
			aImg: uploadResUrl.value,
			aText: articleValue.value,
			aTitle: articleTitle.value,
			aType: "追忆文章",
			meMemorialId: meMemorialId.value,
		})
		if (res.code === 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
				complete: () => {
					articleTitle.value = ''
					articleValue.value = ''
					uploadResUrl.value = ''
					setTimeout(() => {
						navigateBack()
					}, 1000)
				}
			})
		} else {
			uni.showToast({
				title: '提交失败',
				icon: 'error'
			})
		}
	}

	onMounted(() => {
		route_init() // 路由参数
	})

	const route_init = async () => {
		const route = useRoute()
		if (route.query.meMemorialId && route.query.meMemorialId !== 'undefined') {
			meMemorialId.value = route.query.meMemorialId
		}
	}
</script>

<template>
	<view class="">
		<uv-navbar :fixed="false" bgColor="#f8f8f8" @leftClick="navigateBack" title="编辑发布文章">
		</uv-navbar>
		<view class="p-normal ">
			<view class="p-normal">
				<uv-input placeholder="输入文章标题" v-model="articleTitle" class="mb-normal inp">
				</uv-input>
				<uni-file-picker file-mediatype="image" limit='1' :auto-upload='false'
					@select="handleUploadSuccess($event)" />
				<view class="text">
					<sp-editor @input="editor_hanleInput" @upinImage="editor_upinImage"></sp-editor>
				</view>
				<uv-button class="mt-normal" type="primary" text="提交" @click="editorSubmit_handleClick"></uv-button>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>

</style>